<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.MainTaskInfo"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.EquipInfo }}</span>
        </el-divider>
        <el-table
          :data="list"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceStatus">
            <template slot-scope="scope">
              {{ scope.row.statusName }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en'
                ? dataList.eDeviceStorageAddress
                : dataList.DeviceStorageAddress
            "
          >
            <template slot-scope="scope">
              {{ scope.row.storageAddress }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DevicePersonResponsibleId">
            <template slot-scope="scope">
              {{ scope.row.personResponsibleName }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.MaintenanceTask">
            <template slot-scope="scope">
              {{ scope.row.project }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-form
          ref="formData"
          class="base-pipeline-layout system-user-form"
          label-width="100px"
          :model="formData"
          :rules="formDataRules"
          status-icon
        >
          <el-divider class="el-divider-specail" content-position="left"
            ><span>{{ dataList.MainRecord }}</span>
          </el-divider>
          <el-form-item
            :label="dataList.MaintenancePersonnel"
            :label-width="formLabelWidth"
            prop="maintenancePersonId"
            :error="errorMsg.maintenancePersonId"
          >
            <UserDropDownList
              :value="formData.maintenancePersonId"
              @input="borrowPersonChange"
            />
          </el-form-item>
          <el-form-item
            :label="dataList.MainTime"
            :label-width="formLabelWidth"
            prop="maintenanceDate"
            :error="errorMsg.maintenanceDate"
          >
            <el-date-picker
              v-model="formData.maintenanceDate"
              type="date"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd"
              @change="maintenanceDateChange"
            ></el-date-picker>
          </el-form-item>
          <el-divider class="el-divider-specail" content-position="left"
            ><span>{{ dataList.MainResult }}</span>
          </el-divider>
          <el-form-item
            :label="dataList.EquipStatusAfterMain"
            :label-width="formLabelWidth"
            prop="maintenanceStatus"
            :error="errorMsg.maintenanceStatus"
          >
            <DicDropDownList
              v-model="formData.maintenanceStatus"
              :dict-code="'deviceStatusList'"
              :display-text="displayText"
            />
          </el-form-item>
          <el-form-item
            :label="dataList.NextMainTime"
            :label-width="formLabelWidth"
            :error="errorMsg.nextMaintenanceDate"
          >
            <el-date-picker
              v-model="formData.nextMaintenanceDate"
              type="date"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="dataList.Deviceremark"
            :label-width="formLabelWidth"
            :error="errorMsg.remark"
            style="width: 100%"
          >
            <el-input v-model="formData.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button
          type="primary"
          style="width: 100px"
          @click="onSubmitAndSubmit('formData')"
          >{{ btn.ProcessComplete }}</el-button
        >
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  update,
  updateAndSubmit,
} from "../../../api/DeviceMaintenanceTask";
import UserDropDownList from "../../../components/UserDropDownList.vue";
import { normal } from "../../../utils/const.js";
import DicDropDownList from "../../../components/DicDropDownList.vue";
import { getDateByName, formatTime } from "../../../utils/time";

export default {
  name: "DeviceMaintenanceTaskDisposeDialog",
  components: { UserDropDownList, DicDropDownList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [],
      normal,
      displayText: [
        this.$t("ModuleDevice.Device.Normal"),
        this.$t("ModuleDevice.Device.Fault"),
      ],
      formLabelWidth: "120px",
      loading: false,
      innerDialogFormVisible: false,
      formData: {
        maintenancePersonId: this.$store.getters.currentUserId,
        maintenanceDate: new Date(),
        remark: "",
        nextMaintenanceDate: null,
        maintenanceStatus: 0,
      },
      formDataRules: {
        maintenancePersonId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        maintenanceStatus: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        maintenanceDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      errorMsg: {
        maintenancePersonId: null,
        maintenanceDate: null,
        remark: "",
        nextMaintenanceDate: null,
        maintenanceStatus: null,
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.initData();
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    maintenanceDateChange() {
      if (this.formData.typeName !== "临时维保") {
        this.formData.nextMaintenanceDate = getDateByName(
          this.formData.maintenanceDate,
          this.formData.deviceMaintenanceProject.unit,
          this.formData.deviceMaintenanceProject.unitName
        );
      }
    },
    initData() {
      getList({ id: this.id }, { pageIndex: 1, pageSize: 1 })
        .then((res) => {
          var data = res.data.dataList[0];
          this.formData = data;
          this.formData.maintenanceDate = new Date();
          if (
            this.formData.maintenanceStatus === 0 ||
            this.formData.maintenanceStatus === "0"
          ) {
            this.formData.maintenanceStatus = this.normal;
          }

          if (this.formData.typeName === "临时维保") {
            if (formatTime(this.formData.nextMaintenanceDate) === "") {
              this.formData.nextMaintenanceDate = "";
            }
          } else {
            this.formData.nextMaintenanceDate = getDateByName(
              this.formData.maintenanceDate,
              this.formData.deviceMaintenanceProject.unit,
              this.formData.deviceMaintenanceProject.unitName
            );
          }

          data.device.project = data.project;
          this.list.push(data.device);
        })
        .catch((res) => {});
    },
    borrowPersonChange(val) {
      this.formData.maintenancePersonId = val;
    },
    // 处理完成
    dispose() {
      this.$refs.formData.validate((valid) => {
        // if (valid) {
        // } else {
        // }
      });
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.formData.deviceId = this.formData.device.id;
          update(this.formData).then((res) => {
            this.closeDialog();
          });
        }
      });
    },
    onSubmitAndSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.formData.deviceId = this.formData.device.id;
          this.formData.status = 30;
          this.formData.statusName = this.dataList.Completed;

          updateAndSubmit(this.formData).then((res) => {
            this.closeDialog();
          });
        }
      });
    },
  },
};
</script>
